@import '../ivcss';

.test-1{
	// 如果我们要定义宽度20像素时，我们可以这样写
	// 默认是px，所以如果不写入单位，也会自动给你添加
	@include ivcss(w20px, h20);
	
	// // 若是需要输入百分比的形式
	// // 因为sass@include传值有规范，所以含百分号需要添加双引号
	// // 所以这里推荐你直接加p，会自动处理成百分比的形式
	@include ivcss(w20p, 'w20%');	
	
	// // 传颜色
	@include ivcss(c#fff, bgc#000, bg-rgba(0,0,0,0.1));
	
	// // 传背景图片
	@include ivcss('bg`url("test.png") no-repeat top center`')
	
	// // 传边距ivcss还支持多种方式传值哦~
	@include ivcss(p20, p20-30-40 , ma-20-10p-30rem);
	
	// // 除了自定义的参数，emmet表里绝大部分的缩写都支持哦~
	@include ivcss(pos, poa, db, ovh, txov);	
	
	// 除此之外，ivcss还提供一些其它特殊的值
	// xy + t/b/r/l 会返回四个范围的auto值
	@include ivcss(xyt, xyb);
	
	// 还有还有，也允许混写形式哦
	@include ivcss('[.box]', m0a, ha);
	
	// 04-16 new function
	@include ivcss('test-extend', center, w500);
	
}

@include ivcss('[div .test-2]', ha, center);

@include ivcss('[.test-3]', w10, h300px, p20-50px-30);


// .box{
//   width: 300px;
//   height: 500px;
//   display: inline-block;
//   background: #fff;
//   border: 1px solid rgba(0,0,0,0.1);
//   border-radius: 25px;
//   margin: 10px 20px;
//   position: relative;
// }
// .box {
// 	@include ivcss(w300, h500, dib, bg#fff, "bd1px solid rgba(0,0,0,0.1)", m10-20, por);
// }
@include ivcss('[.box]', w300, h500, dib, bg#fff, "bd1px solid rgba(0,0,0,0.1)", m10-20, por);
// .book-image{
//   display: block;
//   width: 80%;
// 	height: auto;
//   margin: 10% auto 5%;
// }

// .book-image{
// 	@include ivcss(db, w80p, ha, m10p-a-5p);
// }
@include ivcss('[.book-image]', db, w80p, ha, m10p-a-5p);
// .book-name {
// 	text-align: center;
//   overflow: hidden;
//   white-space: nowrap;
//   text-overflow: ellipsis;
//   padding: 10px;
// }
// .book-name {
// 	@include ivcss(tac, ovh, whsnw, tov, p10);
// }
@include ivcss('[.book-name]', tac, ovh, whsnw, tov, p10);
// .process-bar{
//   width: auto;
//   height: 10px;
//   margin: 0 50px 0 10px;
//   background: #ccc;
//   position: relative;
//   border-radius: 5px;
// }
// .process-bar{
// 	@include ivcss(wa, h10, m0-50-0-10, bg#ccc, bdrs5);
// }
@include ivcss('[.process-bar]', wa, h10, m0-50-0-10, bg#ccc, bdrs5);
// .process-active{
//   display: block;
//   width: 100%;
// 	height: 100%;
//   border-radius: 5px;
//   background: rgb(254, 189, 89);
// }
// .process-active{
// 	@include ivcss(db, w100p, h100p, bdrs5, bg-rgb(254,189,89));
// }
	@include ivcss('[.process-active]', db, w100p, h100p, bdrs5, bg-rgb(254,189,89));
	

.test{
	@include ivcss('bg`url("test.png") no-repeat top center`');
	@include ivcss("bgurl('test.png') no-repeat top center");
}